<template>
  <div
    class="log-contentx infinite-list-wrapper"
    @mouseenter="handlerEnter"
    @mouseleave="hnadlerLeave"
  >
    <div class="sub-title">
      <div class="Title">
        <i
          class="iconfont icon-rizhi1"
          style="font-size: 20px; margin-right: 5px"
        ></i>
        <span style="color: #303133"> 日志信息</span>
        <i class="el-icon-search icon" @click="isShow = !isShow"></i>
      </div>
    </div>
    <div class="search" v-show="isShow">
      <el-date-picker
        v-model="value2"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
        size="mini"
        value-format="yyyy-MM-dd"
        @change="getLogList"
      >
      </el-date-picker>
    </div>
    <ul
      class="list"
      v-loading="firstLoading"
      element-loading-text="日志加载中..."
    >
      <div class="item" v-for="(item, i) in LogList" :key="i">
        <span class="item-time">
          <i class="el-icon-time"></i>
          <span style="margin-left: auto">{{ item.createTime }}</span>
        </span>
        <span
          class="content"
          :style="{
            color: item.status == 0 ? 'black' : 'red',
          }"
        >
          {{ item.jobMessage.trim() }}。
        </span>
      </div>

      <div class="emptyData" v-if="isEmpty">暂无数据</div>
      <div class="loading-text" v-if="loading">
        <div><i class="el-icon-loading"></i>加载中...</div>
      </div>
      <div v-if="noMore && LogList.length > 16" class="loading-text">
        没有更多了
      </div>
    </ul>
  </div>
</template>

<script>
import { deviceLogList } from "@/api/monitor/jobLog";
export default {
  props: {
    jobGroup: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      LogList: [],
      timer: null,
      params: {
        pageNum: 0,
        pageSize: 16,
        "params[beginTime]": "",
        "params[endTime]": "",
      },
      loading: false,
      total: 0,
      isMoveEnter: false,
      value2: null,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      isShow: false,
      firstLoading: true,
      isEmpty: false,
    };
  },
  methods: {
    handlerEnter() {
      this.isMoveEnter = true;
      clearInterval(this.timer);
    },
    hnadlerLeave() {
      this.isMoveEnter = false;
      this.params.pageNum = 1;
      this.openSetInter();
    },
    getLogList(e) {
      let params = { jobGroup: this.jobGroup };
      this.loading = this.isMoveEnter;
      deviceLogList(params).then((res) => {
        this.LogList = this.isMoveEnter
          ? [...this.LogList, ...res.rows]
          : res.data;
        this.total = res.total;
        this.loading = false;
        if (e == "init") {
          if (this.LogList.length == 0) {
            this.isEmpty = true;
          }
          this.firstLoading = false;
        }
      });
    },
    openSetInter() {
      clearInterval(this.timer);
      this.timer = setInterval(() => {
        this.getLogList();
      }, 20000);
    },
  },
  computed: {
    noMore() {
      return this.LogList.length >= this.total;
    },
    disabled() {
      return this.loading || this.noMore;
    },
  },
  created() {
    this.getLogList("init");
    this.openSetInter();
  },
  mounted() {},
  destroyed() {
    clearInterval(this.timer);
  },
};
</script>

<style lang="less" scoped>
.el-range-editor.el-input__inner {
  width: 80% !important;
}

.log-contentx {
  // padding: 0 10px;
  height: 100%;
  border-left: 1px dashed #e6e6e6;
  .search {
    min-height: 50px;
    border-bottom: 1px solid #e6e6e6;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.log-contentx {
  display: flex;
  flex-direction: column;

  .sub-title {
    width: 100%;
    min-height: 48px;
    padding: 10px;
    display: flex;
    align-items: center;
    border-bottom: 1px dashed #e6e6e6;

    .Title {
      width: 100%;
      font-size: 18px;
      font-weight: bold;
      display: flex;
      align-items: center;

      .icon {
        width: 50px;
        height: 100%;
        margin-left: auto;
        cursor: pointer;
        display: flex;
        justify-content: center;
      }
    }

    .glass-number {
      height: 100%;
      margin-left: auto;
      font-size: 14px;
      display: flex;
      align-items: flex-end;
      cursor: pointer;

      .number {
        font-size: 18px;
        font-weight: bold;
        transform: translateY(2px);
        margin-left: 10px;
      }

      .number:hover {
        text-decoration: underline;
      }
    }
  }

  .list {
    position: relative;
    padding-left: 0px;
    margin-bottom: 0;
    overflow-y: auto;
    padding: 10px;
    min-height: calc(100% - 48px);
    .emptyData {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      color: #e6e6e6;
      font-size: 24px;
    }
  }

  .loading-text {
    display: flex;
    justify-content: center;
    font-size: 16px;
    margin-bottom: 10px;
  }

  .item {
    min-height: 40px;
    display: flex;
    flex-direction: column;
    margin-bottom: 7px;

    .item-time {
      font-size: 16px;
      display: flex;
    }

    .content {
      word-break: break-all;
      font-size: 14px;
      color: red;
      padding: 5px 0;
      border-bottom: 1px solid #e6e6e6;
    }
  }

  .loading {
    display: flex;
    justify-content: center;
    font-size: 18px;
  }
}
</style>
